.device-detail{
	.main{
		background-color: #f2f2f2;
		min-height: 100vh;
		padding: 32rpx;
		box-sizing: border-box;
		.device-info-container{
			width: 100%;
			height: 216rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding: 32rpx 24rpx 32rpx 24rpx;
			box-shadow: 0rpx 6rpx 14rpx 2rpx rgba(0,87,154,0.1);
			.device-info-top-wrapper{
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;
				.device-name{
					height: 44rpx;
					font-size: 32rpx;
					font-family: $global-font-family;
					font-weight: 800;
					color: #333333;
					line-height: 44rpx;
					margin-right: 16rpx;
					width: calc(100% - 96rpx);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.device-status{
					min-width: 96rpx;
					height: 44rpx;
					border-radius: 10rpx;
					border: 2rpx solid;
					font-size: 28rpx;
					font-family: $global-font-family;
					font-weight: 400;
					color: #365FFF;
					text-align: center;
					line-height: 44rpx;
					padding: 0rpx 10rpx 0rpx 10rpx;
					box-sizing: border-box;
				}
			}
			.device-info-item{
				height: 40rpx;
				font-size: 28rpx;
				font-family: $global-font-family;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				margin-bottom: 16rpx;
			}
		}
		.device-amount-container{
			margin-top: 28rpx;
			width: 100%;
			height: 202rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			padding: 48rpx 0rpx 48rpx 0rpx;
			box-sizing: border-box;
			background: linear-gradient(151deg, #84DBFF 0%, #365FFF 100%);
			.amount-item{
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.amont-value{
					height: 66rpx;
					font-size: 48rpx;
				    font-family: $global-font-family;
					font-weight: 800;
					color: #ffffff;
					line-height: 66rpx;
					width: 100%;
					text-align: center;
					.unit{
						font-size: 40rpx;
						display: inline-block;
					}
				}
				.amount-label{
					height: 40rpx;
					font-size: 28rpx;
					font-family: $global-font-family;
					font-weight: 400;
					color: #ffffff;
					line-height: 40rpx;
				}
				&:first-of-type{
					border-right: 2rpx #E6E6E6 solid;
					box-sizing: border-box;
				}
			}
		}
		.device-detail-container{
			padding: 32rpx 24rpx 32rpx 24rpx;
			box-sizing: border-box;
			width: 686rpx;
			min-height: 324rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 32rpx;
			display: flex;
			flex-wrap: wrap;
			.title{
				width: 100%;
				height: 44rpx;
				font-size: 32rpx;
				font-family: $global-font-family;
				font-weight: bold;
				color: #333333;
				line-height: 44rpx;
				margin-bottom: 32rpx;
			}
			.detail-item{
				height: 34rpx;
				line-height: 34rpx;
				min-width:50%;
				display: flex;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 20rpx;
				.label{
					font-size: 24rpx;
					font-family: $global-font-family;
					font-weight: 400;
					color: #909399;
					min-width: 120rpx;
					white-space: nowrap;
				}
				.value{
					font-size: 24rpx;
					font-family: $global-font-family;
					font-weight: 400;
					color: #333333;
				}
			}
		}
		.device-statistical-chart-container{
			width: 100%;
			height: 456rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 32rpx 20rpx 32rpx 20rpx;
			box-sizing: border-box;
			margin-top: 32rpx;
			.title{
				width: 100%;
				height: 44rpx;
				font-size: 32rpx;
				font-family: $global-font-family;
				font-weight: bold;
				color: #333333;
				line-height: 44rpx;
				margin-bottom: 32rpx;
			}
			.charts-box{
				width: 100%;
				height: 288rpx;
			}
		}
	}
}